<template>
  <div class="topology-page">
    <div class="page-header">
      <h3>大数据平台架构拓扑图</h3>
      <el-button type="primary" @click="dialogVisible = true">
        <el-icon class="btn-icon"><FullScreen /></el-icon>
        全屏查看
      </el-button>
    </div>

    <div class="topology-container">
      <TopologyMap :topology="bigDataArchitecture" />
    </div>

    <TopologyDialog v-model="dialogVisible">
      <TopologyMap :topology="bigDataArchitecture" />
    </TopologyDialog>
  </div>
</template>

<script setup>
import TopologyMap from '../components/TopologyMap.vue'
import TopologyDialog from '../components/TopologyDialog.vue'
import { ref } from 'vue'
import { FullScreen } from '@element-plus/icons-vue'

const dialogVisible = ref(false)

const bigDataArchitecture = [
  {
    id: 'big-data-platform',
    label: '大数据平台',
    children: [
      {
        id: 'data-ingestion',
        label: '数据采集层',
        children: [
          {
            id: 'realtime',
            label: '实时采集',
            children: [
              { id: 'kafka', label: 'Kafka集群' },
              { id: 'flume', label: 'Flume' }
            ]
          },
          {
            id: 'batch',
            label: '离线采集',
            children: [
              { id: 'sqoop', label: 'Sqoop' },
              { id: 'datax', label: 'DataX' }
            ]
          }
        ]
      },
      {
        id: 'data-storage',
        label: '数据存储层',
        children: [
          {
            id: 'distributed-storage',
            label: '分布式存储',
            children: [
              { id: 'hdfs', label: 'HDFS' },
              { id: 'hbase', label: 'HBase' }
            ]
          },
          {
            id: 'data-warehouse',
            label: '数据仓库',
            children: [
              { id: 'hive', label: 'Hive' },
              { id: 'clickhouse', label: 'ClickHouse' }
            ]
          }
        ]
      },
      {
        id: 'computing',
        label: '计算引擎层',
        children: [
          {
            id: 'batch-computing',
            label: '批处理',
            children: [
              { id: 'mapreduce', label: 'MapReduce' },
              { id: 'spark', label: 'Spark' }
            ]
          },
          {
            id: 'stream-computing',
            label: '流处理',
            children: [
              { id: 'flink', label: 'Flink' },
              { id: 'storm', label: 'Storm' }
            ]
          }
        ]
      },
      {
        id: 'data-service',
        label: '数据服务层',
        children: [
          { id: 'api-service', label: 'API服务' },
          { id: 'bi', label: 'BI分析' },
          { id: 'ml', label: '机器学习平台' }
        ]
      }
    ]
  }
]
</script>

<style scoped>
.topology-page {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.topology-container {
  height: calc(100vh - 200px);
  border: 1px solid #eee;
  border-radius: 4px;
}

.btn-icon {
  margin-right: 8px;
}
</style>